<template>
  <Header title="账号管理"></Header>
  <div>
    <van-field v-model="name" label="昵称" placeholder="请输入昵称" />
    <van-field v-model="sign" label="个性签名" placeholder="请输入个性签名" />
    <van-field v-model="pass" label="密码" placeholder="请输入密码" />
    <van-button
      type="primary"
      color="#ffc400"
      round
      block
      class="save-btn"
      @click="save"
      >保存</van-button
    >
    <van-button
      type="primary"
      color="#ffc400"
      round
      block
      class="save-btn"
      @click="logOut"
      >退出登录</van-button
    >
  </div>
</template>

<script setup>
import { ref } from "vue";
import Header from "../home/components/Header.vue";
import { useRouter } from "vue-router";
const router = useRouter();
const name = ref("");
const sign = ref("");
const pass = ref("");
const save = () => {
  if (name && pass) {
    
    console.log(localStorage.userInfo);
    let userInfo = JSON.parse(localStorage.userInfo);
    let newUserInfo = {
      user: name.value || userInfo.name,
      pass: pass.value || userInfo.pass,
    };
    localStorage.setItem("userInfo", JSON.stringify(newUserInfo));
    showToast("保存成功");
    router.push("/center");
  } else {
    showToast("请输入内容");
  }
};
const logOut = () => {
  localStorage.removeItem("isLogin");
  showToast("退出成功");
  router.push("/login");
};
</script>

<style scoped lang="less">
.save-btn {
  width: 80%;
  margin: 20px auto;
}
</style>
